<template>
  <el-row>
    <el-col :span="14">
      <el-form ref="menuFormRef" :model="formData" label-width="120px">
        <el-form-item label="委试号">
          <el-autocomplete
            v-model="formData.testNumber"
            :fetch-suggestions="querySearch"
            :trigger-on-focus="false"
            clearable
            class="inline-input w-50"
            placeholder="请输入委试号"
            @select="handleSelect"
          />
        </el-form-item>
        <el-form-item label="试验项目">
          <el-select v-model="formData.experiments" placeholder="请选择试验项目">
            <el-option label="XX1实验" value="XX1实验" />
            <el-option label="XX2实验" value="XX2实验" />
            <el-option label="XX3实验" value="XX3实验" />
          </el-select>
        </el-form-item>
        <el-form-item label="模版选择">
          <el-select v-model="formData.temp" placeholder="请选择试验模版">
            <el-option v-for="item in tempArr" :key="item.name" :label="item.name" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">启动实验</el-button>
          <el-button type="primary" @click="creatingReport">生成报告</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="8">
      <el-dialog width="25%" v-model="dialogVisible" title="开始实验" draggable>
        <div style="padding: 50px 10px; font-size: 16px">
          xxx试验依据的标准，需要注意的事项1.xxx.2.xxx.3.xxx。
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="closeDialog"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { useProfileConfigStore } from '@/store'
import { useFormatConfigStore } from '@/store'
import { useStartExperimentStore } from '@/store'
const formatConfigStore = useFormatConfigStore()
const profileConfigStor = useProfileConfigStore()
const startExperimentStore = useStartExperimentStore()
import { LocationQuery, LocationQueryValue, useRoute } from 'vue-router'
const dialogVisible = ref(false)

import router from '@/router'
interface RestaurantItem {
  value: string
  link: string
}
const menuFormRef = ref()
const initTemp = ref({
  name: '',
  rulesList: [],
  value: '',
})

const formData = ref({
  testNumber: '',
  experiments: '',
  temp: initTemp, // 假设取数组第一个元素作为默认值
  tempArr: profileConfigStor.tempData,
})
const selectedTemp = ref({ name: '', value: '', rulesList: [] })
const tempArr = ref(profileConfigStor.tempData)

console.log('tempArr', profileConfigStor.tempData)

const restaurants = ref<Record<string, any>>([])
onMounted(() => {
  restaurants.value = loadAll()
})
const creatingReport = () => {
  router.push({ path: '/dashboard' })
}
const closeDialog = () => {
  dialogVisible.value = false
}
const loadAll = () => {
  return [
    { value: '160691G', id: '1' },
    { value: '160106G', id: '2' },
    { value: '200904G', id: '3' },
    { value: '150101G', id: '4' },
    { value: '160414G', id: '5' },
  ]
}
const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}

const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
  }
}

const onSubmit = () => {
  dialogVisible.value = true
  menuFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      const now = new Date().toLocaleString()
      const startDataTemp = { ...formData.value, currentTime: now }
      startExperimentStore.startData = startDataTemp
    }
    console.log('formatConfigStore!', formatConfigStore.dataSource)
    console.log('profileConfigStor!', profileConfigStor.tempData)
    console.log('submit!', startExperimentStore.startData)
  })
}
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  margin-bottom: 20px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
